<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../layui/css/layui.css">
    <link rel="stylesheet" href="static/index.css">
</head>

<body>
    <div class="header fixed">
        <div class="header2">
            <!-- <img class="logo" src="https://www.easyicon.net/api/resizeApi.php?id=1231092&size=128"> -->
            <div> </div>
            <div class="nav">
                <div class="nav-item"><a href="#">首页</a></div>
                <div class="nav-item"><a href="#news">新闻</a></div>
                <div class="nav-item"><a href="#works">作品</a></div>
                <div class="nav-item"><a href="#sign">报名</a></div>
            </div>
        </div>
    </div>

    <div class="content">
        <div class="layui-carousel banner" id="test1">
            <div carousel-item>
                <div><img
                        src="https://desk-fd.zol-img.com.cn/t_s960x600c5/g2/M00/0C/00/ChMlWVyA5JuIJ-ifABrdMvVincoAAIp9gNZMZ0AGt1K305.jpg">
                </div>
                <div><img
                        src="https://desk-fd.zol-img.com.cn/t_s960x600c5/g2/M00/0C/00/ChMlWVyA5JuIJ-ifABrdMvVincoAAIp9gNZMZ0AGt1K305.jpg">
                </div>
                <div><img
                        src="https://desk-fd.zol-img.com.cn/t_s960x600c5/g2/M00/0C/00/ChMlWVyA5JuIJ-ifABrdMvVincoAAIp9gNZMZ0AGt1K305.jpg">
                </div>
                <div><img
                        src="https://desk-fd.zol-img.com.cn/t_s960x600c5/g2/M00/0C/00/ChMlWVyA5JuIJ-ifABrdMvVincoAAIp9gNZMZ0AGt1K305.jpg">
                </div>
                <div><img
                        src="https://desk-fd.zol-img.com.cn/t_s960x600c5/g2/M00/0C/00/ChMlWVyA5JuIJ-ifABrdMvVincoAAIp9gNZMZ0AGt1K305.jpg">
                </div>
            </div>
        </div>

        <div class="container">
            <div class="layui-card sign" id="sign">
                <h3 class="sign-title">报名入口</h3>
                <form class="layui-form" action="">
                    <div class="layui-form-item">
                        <label class="layui-form-label">学校名称</label>
                        <div class="layui-input-block">
                            <input type="text" name="school" required lay-verify="required" placeholder="请输入学校名称"
                                autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">小组名称</label>
                        <div class="layui-input-block">
                            <input type="text" name="name" required lay-verify="required" placeholder="请输入小组名称"
                                autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">专&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;业</label>
                        <div class="layui-input-block">
                            <input type="text" name="profession" required lay-verify="required" placeholder="请输入专业"
                                autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">年&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;级</label>
                        <div class="layui-input-block">
                            <input type="text" name="grade" required lay-verify="required" placeholder="请输入年级"
                                autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                            <button class="layui-btn" lay-submit lay-filter="formDemo">提交</button>
                        </div>
                    </div>
                </form>
            </div>
            <div class="news" id="news">
                <div class="news-item">
                    <a href="#"> 北京市消协发布大数据“杀熟”榜：网购、在线旅游和网约车排前三</a>
                </div>
                <div class="news-item">
                    <a href="#"> 北京市消协发布大数据“杀熟”榜：网购、在线旅游和网约车排前三</a>
                </div>
                <div class="news-item">
                    <a href="#"> 北京市消协发布大数据“杀熟”榜：网购、在线旅游和网约车排前三</a>
                </div>
                <div class="news-item">
                    <a href="#"> 北京市消协发布大数据“杀熟”榜：网购、在线旅游和网约车排前三</a>
                </div>
                <div class="news-item">
                    <a href="#"> 北京市消协发布大数据“杀熟”榜：网购、在线旅游和网约车排前三</a>
                </div>
            </div>
        </div>

        <div class="works" id="works">

            <!-- <div class="title">
                <div class="title">作品展示</div>
                <div class="title">更多 >>></div>
            </div> -->

            <div class="school-list">
                <div class="school">武汉大学</div>
                <div>|</div>
                <div class="school">华中科技大学武昌分校</div>
                <div>|</div>
                <div class="school">汉大学</div>
                <div>|</div>
                <div class="school">武汉大学大学</div>
                <div>|</div>
                <div class="school">武汉武汉学</div>
            </div>
            <div class="videoes">
                <div class="layui-card">
                    <div class="layui-card-header">
                        <div> 第一小组(武汉大学)</div>
                    </div>
                    <div class="layui-card-body">
                        <video src="http://www.w3school.com.cn/i/movie.ogg"></video>
                        <div class="float-play">
                            <i class="layui-icon">&#xe652; </i>
                        </div>
                    </div>
                </div>
                <div class="layui-card">
                    <div class="layui-card-header">
                        <div> 第一小组(武汉大学)</div>
                    </div>
                    <div class="layui-card-body">
                        <video src="http://www.w3school.com.cn/i/movie.ogg"></video>
                        <div class="float-play">
                            <i class="layui-icon">&#xe652; </i>
                        </div>
                    </div>
                </div>
                <div class="layui-card">
                    <div class="layui-card-header">
                        <div> 第一小组(武汉大学)</div>
                    </div>
                    <div class="layui-card-body">
                        <video src="http://www.w3school.com.cn/i/movie.ogg"></video>
                        <div class="float-play">
                            <i class="layui-icon">&#xe652; </i>
                        </div>
                    </div>
                </div>
                <div class="layui-card">
                    <div class="layui-card-header">
                        <div> 第一小组 (武汉大学)</div>
                    </div>
                    <div class="layui-card-body">
                        <video src="http://www.w3school.com.cn/i/movie.ogg"></video>
                        <div class="float-play">
                            <i class="layui-icon">&#xe652; </i>
                        </div>
                    </div>
                </div>
            </div>
            <div class="videoes">
                <div class="layui-card">
                    <div class="layui-card-header">
                        <div> 第一小组(武汉大学)</div>
                    </div>
                    <div class="layui-card-body">
                        <video src="http://www.w3school.com.cn/i/movie.ogg"></video>
                        <div class="float-play">
                            <i class="layui-icon">&#xe652; </i>
                        </div>
                    </div>
                </div>
                <div class="layui-card">
                    <div class="layui-card-header">
                        <div> 第一小组(武汉大学)</div>
                    </div>
                    <div class="layui-card-body">
                        <video src="http://www.w3school.com.cn/i/movie.ogg"></video>
                        <div class="float-play">
                            <i class="layui-icon">&#xe652; </i>
                        </div>
                    </div>
                </div>
                <div class="layui-card">
                    <div class="layui-card-header">
                        <div> 第一小组(武汉大学)</div>
                    </div>
                    <div class="layui-card-body">
                        <video src="http://www.w3school.com.cn/i/movie.ogg"></video>
                        <div class="float-play">
                            <i class="layui-icon">&#xe652; </i>
                        </div>
                    </div>
                </div>
                <div class="layui-card">
                    <div class="layui-card-header">
                        <div> 第一小组 (武汉大学)</div>
                    </div>
                    <div class="layui-card-body">
                        <video src="http://www.w3school.com.cn/i/movie.ogg"></video>
                        <div class="float-play">
                            <i class="layui-icon">&#xe652; </i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <hr class="layui-bg-black">
    <div class="footer">

    </div>

    <div class="video-fullscreen">
        <video id="video" src="" height="80%"></video>
    </div>

    <script src="layui/layui.all.js"></script>
    <script>
        var layer = layui.layer;
        var form = layui.form;
        var carousel = layui.carousel;
        var $ = layui.jquery;
        $('.float-play').on('click', function (e) {
            $(".video-fullscreen").css({ "display": "flex" });
            $('#video').attr({ 'src': $(this).prev().attr('src') });
            $("#video")[0].play();
            // if (!$(this).hasClass('pause')) {
            //     // $(this).prev()[0].play();
            //     $(this).find('i').html('&#xe651;');
            //     $(this).addClass('pause');
            //     $(".video-fullscreen").css({ "display": "flex" });
            //     $('#video').attr({ 'src': $(this).prev().attr('src') });
            //     $("#video")[0].play();
            // } else {
            //     // $(this).prev()[0].pause();
            //     $(this).find('i').html('&#xe652;');
            //     $(this).removeClass('pause');
            //     $(".video-fullscreen").css({ "display": "none" });
            //     $("#video")[0].pause();
            // }
        });

        $('.video-fullscreen').on('click', function () {
            $("#video")[0].pause();
            $(this).css({ "display": "none" });
        });
        $('video').on('ended', function () {
            $(this).next().removeClass('pause').find('i').html('&#xe652;');
            $(".video-fullscreen").css({ "display": "none" });
        })

        //建造实例
        carousel.render({
            elem: '#test1'
            , width: '100%' //设置容器宽度
            , height: '600px'
            , arrow: 'always' //始终显示箭头
            //,anim: 'updown' //切换动画方式
            , indicator: "none"
        });

        $(".school").on('click', function () {
            $(".school").removeClass("select");
            $(this).addClass("select")
        })
    </script>
</body>


</html>